Ext.define('AM.view.panel.DetailGraphicPanel' ,{
    extend: 'Ext.form.Panel',
    alias : 'widget.detailGraphic',
    id: 'detailGraphic',
    store: 'StoreDetailGraphic',
    layout: 'fit',
    title: 'Detail Graphic',

    initComponent: function() {
        var me = this;
    	this.tbar= [{
            xtype: 'tbtext',
            text: 'Sorting order:',
            },{
                  text: 'Months',
                  id: 'filterButton',
                  icon: 'images/Chart2-Edit.png',
                  tooltip: 'Toggle Filter encoding Months/Years',
                  enableToggle: true,
                  handler: function (button, state) {
                      var text = (button.getText()=='Months' ? 'Years' : 'Months' );
                      button.setText(text);
                  }
            },
        ],
    	this.items= [{
             xtype: 'chart',
             id: 'chartDetail',
             store: 'StoreDetailGraphic',
             shadow: true,
             insetPadding: 5,
             legend: {
                 position: 'right'
             },
             axes: [{
                 type: 'Numeric',
                 minimum: 0,
                 position: 'left',
                fields: ['Jan', 'Feb', 'Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec','2012','2013','2014','2015','2016','2017','2018','2019','2020','2021','2022','2023'],
                 minorTickSteps: 1,
                 grid: true,
                 label: {
                     renderer: Ext.util.Format.numberRenderer('0,0'),
                     font: '10px Arial'
                 }
             }, {
                 type: 'Category',
                 position: 'bottom',
                 fields: 'day',
                 grid: true,
                 label: {
                     font: '11px Arial',
                     renderer: function(name) {
                         return name.substr(0, 3);
                     }
                 }
             }],
        }]
        this.callParent();
    }
});